<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../EasySvg-all.js"></script>
        <script type="text/javascript">
            
            var svg = null;
            
            window.addEventListener("load", function() {
                svg = EasySvg.svg({
                    attr: { 
                        width:'10cm',
                        height:'10cm',
                        style: "border:0;width: 100%; height: 100%; margin-bottom: -8px; background: #555"
                    }
                });
                
                svg.add({
                    type: 'circle',
                    attr: {
                        cx: 50,
                        cy: 50,
                        r: 50,
                        fill: 'blue'
                    },
                    animate: [{
                        attr: {
                            attributeName: "cx", 
                            values: "50;300;50", 
                            dur: "3s", 
                            repeatCount: "indefinite"
                        }
                    },{
                        attr: {
                            attributeName: "r", 
                            values: "50;100;50", 
                            dur: "3s", 
                            repeatCount: "indefinite"
                        }
                    }]
                });
            });
        </script>
    </head>
    <body style="padding: 0px;margin: 0px; width: 100%; height: 100%; overflow: hidden">
        
    </body>
</html>
